<template>
    <div class="fix-operate-list" v-show="!routeMeta.hideFixMenu" v-if="$root.comInfo">
        <a class="item" v-if="info" :href="`tel:${info.phone}`">
            <img src="../../../assets/fix-operate/fix-tel.png" alt="">
        </a>
        <a class="item" v-else :href="`tel:${$root.comInfo.telephone}`">
            <img src="../../../assets/fix-operate/fix-tel.png" alt="">
        </a>
        <div class="item">
            <img src="../../../assets/fix-operate/fix-code.png" alt="">
            <div class="code-img-big">
                <img v-if="info" :src="info.qrcodeUrl" alt="" style="width: 100%;display: block;">
                <img v-else :src="$root.comInfo.photo" alt="" style="width: 100%;display: block;">
            </div>
        </div>
        <a target="_blank" class="item"
           v-if="!isMiniApp"
           :href="`http://wpa.qq.com/msgrd?v=3&uin=${$root.comInfo.companyqq}&site=qq&menu=yes`">
            <img src="../../../assets/fix-operate/fix-qq.png" alt="">
        </a>
        <div class="item" @click="toHome">
            <img src="../../../assets/fix-operate/fix-home.png" alt="">
        </div>
        <div class="item" @click="handlerScrollTop">
            <img src="../../../assets/fix-operate/fix-top.png" alt="">
        </div>
    </div>
</template>

<script>
    export default {
        name: "FixOperate",
        data() {
            return {
                info: null
            }
        },
        computed: {
            routeMeta() {
                return this.$route.meta
            },
            isMiniApp() {
                return this.$root.isMiniApp
            }
        },
        mounted() {
            const fxsId = this.$route.query.fxsId
            const userInfo = this.$utils.store.get('userInfo')
            if (fxsId) {
                if (userInfo && userInfo.userId === fxsId) {
                    return
                }
                this.$api.user.specialInfo(fxsId).then(res => {
                    console.log(res)
                    this.info = res.data
                })
            }
        },
        methods: {
            handlerScrollTop() {
                document.documentElement.scrollTop = 0
                document.body.scrollTop = 0
                window.scrollTop = 0
            },
            toHome() {
                if (this.isMiniApp) {
                    window.$wxMini.switchTab({
                        url: `/pages/index/index`
                    })
                } else {
                    this.$router.push('/')
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../../../style/var";

    .fix-operate-list {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 90;
        display: flex;
        flex-direction: column;

        .item {
            position: relative;
            width: 80px;
            height: 80px;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            cursor: pointer;

            &:hover {
                .code-img-big {
                    transform: scale(1, 1);
                }
            }

            .code-img-big {
                padding: 3px;
                background-color: #fff;
                transform: scale(0, 0);
                transition: all .3s;
                position: absolute;
                top: -30px;
                left: -310px;
                width: 300px;
                height: 300px;

                img {
                    width: 100%;
                    display: block;
                }
            }

            &:active {
                background: $main-color;
            }

            img {
                width: 40px;
                display: block;
            }
        }
    }
</style>
